<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Sprite案例演示</title>
	<link rel="stylesheet" href="css/basic.css">
	<link rel="stylesheet" href="css/sprite.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/sprite.js"></script>
</head>
<body>
	<ul class="sprite">
		<li>
			<s style="background-position: 0 0;" class="s-icon"></s>
			<a href="">慕课网就是好1</a>
		</li>
		<li>
			<s style="background-position: 0 -40px;" class="s-icon"></s>
			<a href="">慕课网就是好2</a>
		</li>
		<li>
			<s style="background-position: 0 -80px;" class="s-icon"></s>
			<a href="">慕课网就是好3</a>
		</li>
		<li>
			<s class="s-icon"></s>
			<a href="">慕课网就是好4</a>
		</li>
		<li>
			<s class="s-icon"></s>
			<a href="">慕课网就是好5</a>
		</li>
		<li>
			<s class="s-icon"></s>
			<a href="">慕课网就是好6</a>
		</li>
		<li>
			<s class="s-icon"></s>
			<a href="">慕课网就是好7</a>
		</li>
		<li>
			<s class="s-icon"></s>
			<a href="">慕课网就是好8</a>
		</li>
		<li>
			<s class="s-icon"></s>
			<a href="">慕课网就是好9</a>
		</li>
		<li>
			<s class="s-icon"></s>
			<a href="">慕课网就是好10</a>
		</li>
		<li>
			<s class="s-icon"></s>
			<a href="">慕课网就是好11</a>
		</li>
	</ul>
</body>
</html>